<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>搜索名称:<input type="text" v-model="msg" v-on:change="fn(msg)"  /></p>
			<table border="2px">
				<tr>
					<th>Name</th>
					<th>Gender</th>
					<th>Age</th>
				</tr>
				<tr v-for="(item,index) in showList" :key="index">
					<td>{{item.name}}</td>
					<td>{{item.Gender}}</td>
					<td>{{item.age}}</td>
				</tr>
			</table>
		</div>
		<script src="js/vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					msg:'',
					showList:[],
					typelist:[
						{'name':'rick','Gender':'male','age':'21'},
						{'name':'demen','Gender':'male','age':'26'},
						{'name':'Jack','Gender':'male','age':'26'},
						{'name':'John','Gender':'female','age':'20'},
						{'name':'Lucy','Gender':'female','age':'16'}
					]
				},
				created:function(){
					this.showList=this.typelist;
				},
				methods:{
					fn:function(msg){
						this.showList=[];
						var nameval = '';
						for (var i = 0; i < this.typelist.length; i++) {
							nameval = this.typelist[i].name.toLowerCase();
							if(nameval.indexOf(msg.toLowerCase())==0){
								this.showList.push({'name':this.typelist[i].name,'Gender':this.typelist[i].Gender,'age':this.typelist[i].age});
							}
						}
					}
				}
			});
		</script>
	</body>
</html>
